<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <!-- <script src="../js/ajax.js"></script> -->
    <style>
        .active{
            color:#0f0;
            font-size: 20px;
            width:100px;
            height:100px;
            position: absolute;
            top:50px;
            left:100px;
        }
        .two{
            transition: all 1s;
        }
        .list{
            position: relative;
            border:1px solid orange;
        }
    </style>
</head>
<body>
    <h3 id="title"  demo="wh2107-daydayup" class="one demo" >jQuery 学习 </h3>
    
    <ul class="list">
        <li class="one first">item_01 </li>
        <li class="two">item_02</li>
        <li class="three">
            item_03 
        </li>
        <li>item_04</li>
        <li>item_05</li>
        <li>item_06</li>
        <li>item_07</li>
        <li>item_08 <span> hello </span></li>
        <li>item_09</li>
        <li class="last">item_10</li>
    </ul>
    <input type="text" class="inp">

    <script>

        // 自己封装的
        // $.ajax({
        //     url:"http://localhost/php2107/demo/php/01_getAllGrade.php",
        //     data:{},
        //     type:'get',
        //     dataType:"json",
        //     success:res=>{
        //         console.log(res)
        //     }
        // })


        // jquery 封装的   基于 Promise
        // $.ajax({
        //     url,
        //     type,
        //     data,
        //     success,
        //     dataType,
        //     async, // 是否异步
        //     beforeSend,  // 发送之前 
        //     error   //  
        //     jsonp,
        //     jsonpCallback,  
            //    headers,
        // })
        // $.get
        // $.post
        // $.jsonp  


        $(".list li").eq(0).on("click",function(){
            // $.ajax({
            //     url:"http://localhost/php2107/demo/php/isExistEmail.php",
            //     type:"get",
            //     data:{id:2107,email:'qq.com'},
            //     beforeSend:function(){
            //         console.log("beforeSend")
            //     },
            //     async:true,
            //     dataType:"json",
            //     success:res=>{
            //         console.log(res)
            //     },
            //     error:err=>{
            //         console.log(err)
            //     },
            //     complete:()=>{
            //         console.log('complete')
            //     },
            // })

            // isExistEmail
            // $.get("http://localhost/php2107/demo/php/isExistEmail.php",{
            //     email:'qqq@q.com'
            // })
            // .then(res=>{
            //     console.log(res)
            // },err=>{
            //     console.log("请求失败....")
            //     console.log(err)
            // })



        })


        // $(".list li").eq(1).on("click",function(){
        //     // $.ajax({
        //     //     url:"http://localhost/php2107/demo/php/login_account.php",
        //     //     type:"POST",
        //     //     data:{
        //     //         account:"zkl",
        //     //         pass:"abc123"
        //     //     },
        //     //     success:res=>{
        //     //         console.log(res)
        //     //     }
        //     // })

        //     $.post("http://localhost/php2107/demo/php/login_account.php",{
        //         account:"zkl",
        //         pass:"abc123"
        //     }).then(res=>{
        //         console.log(res)
        //     })
        // })


        $(".list li").eq(2).on("click",function(){
            // 跨域接口 
            // $.getJSON("https://floor.jd.com/user-v20/feed/get?page=2&pagesize=25&area=1_72_55653_0&source=pc-home&callback=?&_=1624690491233",function(data){
            //     console.log(data)
            // })

            // jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
            // 此行以后的代码将在这个回调函数执行前执行
            // $.getJSON("http://localhost/php2107/jsonp/php/04_searchGoodsOrderLimitCallback.php?cb=?",{
            //     key:"",
            //     orerCol:"id",
            //     orderType:'desc',
            //     pageIndex:1,
            //     pageNum:20
            // },function(data){
            //     console.log(data)
            // })

            // $.ajax({
            //     url:"http://localhost/php2107/jsonp/php/04_searchGoodsOrderLimitCallback.php",
            //     // type:"jsonp",
            //     data:{
            //         key:"",
            //         orerCol:"id",
            //         orderType:'desc',
            //         pageIndex:1,
            //         pageNum:20,
            //     },
            //     dataType:"jsonp",   // jsonp格式访问
            //     jsonp:"cb",
            //     success:res=>{
            //         console.log(res)
            //     }
            // })

            $.ajax({
                url:"https://floor.jd.com/user-v20/feed/get?page=2&pagesize=25&area=1_72_55653_0&source=pc-home&_=1624690491233",
                data:{
                   
                },
                dataType:"jsonp",   // jsonp格式访问
                jsonp:"cb",
                success:res=>{
                    console.log(res)
                }
            })
        })

    </script>
</body>
</html>